<template>
  <div>
    <el-dropdown split-button type="primary" @command="handleCommand">添加查询参数
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="TEXT">文本</el-dropdown-item>
        <el-dropdown-item command="NUMBER">数字</el-dropdown-item>
        <el-dropdown-item command="SINGLE_SELECT">单选</el-dropdown-item>
        <el-dropdown-item command="MULTIPLE_SELECT">多选</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-table :data="params">
      <el-table-column label="参数名" width="120">
        <template slot-scope="pros">
          <el-input v-model="pros.row.paramName"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="表单label" width="120">
        <template slot-scope="pros">
          <el-input v-model="pros.row.paramLabel"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="参数类型" width="120">
        <template slot-scope="pros">
          <span v-if="pros.row.paramDataType == 'TEXT'">文本</span>
          <span v-if="pros.row.paramDataType == 'NUMBER'">数字</span>
          <span v-if="pros.row.paramDataType == 'SINGLE_SELECT'">单选</span>
          <span v-if="pros.row.paramDataType == 'MULTIPLE_SELECT'">多选</span>
        </template>

        <!-- TODO 添加更多查询组件支持 ，比如 时间，日期-->
      </el-table-column>

      <el-table-column label="参数数据源">
        <template slot-scope="pros">
          <span v-if="pros.row.paramDataType == 'TEXT' ||pros.row.paramDataType == 'NUMBER'">无</span>

          <div v-if="pros.row.paramDataType == 'SINGLE_SELECT' || pros.row.paramDataType == 'MULTIPLE_SELECT'">
            <el-radio v-model="pros.row.paramDatasourceType" label="JSON">json</el-radio>
            <el-radio v-model="pros.row.paramDatasourceType" label="SQL">sql</el-radio>

            <el-input type="textarea" v-model="pros.row.paramDatasourceContent"></el-input>

            <el-button type="primary" @click="validateQueryDataSource(pros.row)">测试数据源</el-button>

            <el-button type="primary" @click="example(pros.row)">example</el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="pros">
          <el-button type="danger" icon="el-icon-delete" circle @click="remove(pros.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["datasourceId"],

  data() {
    return {
      params: []
    };
  },
  methods: {

    getParamsConfig(){

        return this.params;

    },

    remove(index) {
      this.params.splice(index, 1);
    },
    example(queryParam) {
      if (queryParam.paramDatasourceType == "JSON") {
        queryParam.paramDatasourceContent = JSON.stringify([
          { key: "key", value: "value" }
        ]);
      } else {
        queryParam.paramDatasourceContent =
          "select 'key1' as `key`,'value1' as `value` from dual";
      }
    },

    validateJsonFormat(json) {
      if (Array.isArray(json)) {
        this.$notify({
          title: "成功",
          message: "数据源格式正确",
          type: "success"
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: "数据源应该为JSON数组"
        });
      }
    },

    validateQueryDataSource(queryParam) {
      if (queryParam.paramDatasourceType == "JSON") {
        try {
          let obj = JSON.parse(queryParam.paramDatasourceContent);

          this.validateJsonFormat(obj);
        } catch (e) {
          // console.log(e);
          this.$notify.error({
            title: "错误",
            message: "数据源应该为JSON数组"
          });
        }
      } else {
        if (this.datasourceId != "") {
          let params = new URLSearchParams();

          params.append("datasourceId", this.datasourceId);
          params.append("sql", queryParam.paramDatasourceContent);

          this.$axios
            .post("/query/testQueryDataSource", params)
            .then(d => {
              if (d.data.status) {
                //校验json格式

                this.validateJsonFormat(d.data.data);
              } else {
                this.$notify.error({
                  title: "错误",
                  message: d.data.message
                });
              }
            })
            .catch(e => {
              this.$notify.error({
                title: "错误",
                message: e.message
              });
            });
        } else {
          this.$notify.error({
            title: "错误",
            message: "请选择一个数据源进行测试"
          });
        }

        //根据当前数据源，执行sql，校验其返回结果。注意检查sql操作类型，只可以是select
      }
    },

    parseJsonArray(json) {
      try {
        let obj = JSON.parse(json);

        if (Array.isArray(obj)) {
          console.log(obj);
          return obj;
        }

        return [];
      } catch (e) {
        console.log(e);
        return [];
      }
    },

    handleCommand(command) {
      let newItem = {
        paramLabel:'',
        paramDataType: command,
        paramName: "arg" + this.params.length,
        value: "",
        paramDatasourceType: "JSON",
        paramDatasourceContent: "[]"
      };

    
    
      this.params.push(newItem);
    }
  }
};
</script>

<style>
</style>
